<template>
	<div class="loginMainPanel">
		<div class="login-panel">
			<p class="login-panel-title">欢迎登录智慧政协后台系统</p>
			<Form ref="formValidate" :model="loginParams" :rules="ruleValidate">
				<FormItem prop="username">
					<Input type="text" v-model="loginParams.username" :maxlength="11" placeholder="请输入用户名" size="large">
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
				</FormItem>
				<FormItem prop="password">
					<Input type="password" v-model="loginParams.password" placeholder="请输入密码" size="large">
                        <Icon type="ios-lock-outline" slot="prepend"></Icon>
                    </Input>
				</FormItem>
				<!-- <Checkbox v-model="loginParams.isRem" class="checkbox">记住密码</Checkbox> -->
				<!-- <p class="forget" @click="goForgetPwd">忘记密码？</p> -->
				<FormItem>
					<Button type="primary" long @click="handleSubmit('formValidate')" size="large" :loading="isLoading">登 录</Button>
				</FormItem>
			</Form>
		</div>
	</div>
</template>

<script>
// import accountService from '@/libs/service/accountService.js'

export default {
	data() {
		return {
			isLoading: false,
			loginParams: { //登录参数，用户名、密码
				username: '',
				password: '',
			},
			ruleValidate: {
				username: [
				    { required: true, message: '用户名不能为空', trigger: 'blur' }
				],
				password: [
				    { required: true, message: '密码不能为空', trigger: 'blur' }
				]
			}
		}
	},
	mounted() {
       
    },
	methods: {
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if(valid) {
					this.login();
				} else {
					this.$Message.error('账号密码验证失败!');
				}
			})
        },
        login() {
			this.$router.push({name:'roomManage'})
        }
	}
}
</script>

<style scope lang="less">
.loginMainPanel {
	background: url('../../assets/login-back.png') no-repeat;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width:100%;
	overflow:auto;
	top:84px;
	position:absolute;
	z-index:10;
	bottom:100px;
	display: flex;
	align-items: center;
	.login-panel {
		background-color: rgba(255,255,255,0.87);
		width: 500px;
		padding: 30px;
		border-radius: 10px;
		-webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        text-align: center;
		margin-left: auto;
		margin-right: 150px;
		padding: 30px;
		.login-panel-title {
			font-size: 25px;
            color: #2D8CF0;
			margin-bottom: 20px;
		}
		.checkbox {
			margin-bottom: 20px;
		}
		.forget {
			float: right;
			font-size: 14px;
			color: rgba(0,0,0,0.87);
			cursor: pointer;
			&:hover {
				color: #3399ff;
			}
		}
	}
}
</style>